<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/heard.css"/>
    <link rel="stylesheet" type="text/css" href="../css/search.css"/>

    <script type="text/javascript" src="../script/jq.min.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript">
        function goback() {
            api.closeFrame({name: 'search_page'});
        }

    </script>
</head>
<body>
<!--顶部标题栏-->
<div class="header" id="topbar">
    <div class="left" tapmode onclick="goback()">
        <img src="../image/fhui.png" alt="" class="logoleft">
    </div>
    <div class="t">
        <span class="title">搜索页</span>
    </div>
</div>


<div class="container">
    <div class="search df">
        <input class="df_1" id="search" placeholder="请输入你有搜索的内容"/>

        <div onclick="Search();">
            <image class="searchcion" src="../image/search.png"></image>
        </div>
    </div>
    <div class="cont">
        <text class="font_14">热门搜索</text>
        <div class="w100">
            <div onclick="doSearch(this);">产品</div>
            <div onclick="doSearch(this);">小米</div>
            <div onclick="doSearch(this);">婴儿用品</div>
            <div onclick="doSearch(this);">三星</div>
            <div onclick="doSearch(this);">苹果</div>
            <div onclick="doSearch(this);">华为</div>
            <div onclick="doSearch(this);">中兴</div>
        </div>

        <text class="font_14 mt10">历史搜索</text>
        <div class="w100" id="ss">
            <div id="aaa" onclick="doSearch(this);">产品</div>
            <div onclick="doSearch(this);">模拟</div>
            <div onclick="doSearch(this);">婴儿用品</div>
            <div onclick="doSearch(this);">香蕉</div>
            <div onclick="doSearch(this);">苹果</div>
        </div>
    </div>
    <div class="search_no" style="display: none;">
        <div class="font_14">
            <image class="scimg" src="../image/search_no.png"></image>
        </div>
        <text>没有找到您要的宝贝/(ㄒoㄒ)/~~</text>
    </div>

    <!--<div class="shop" wx:for="{{productData}}">-->
    <!--<navigator url="../product/detail?productId={{item.id}}" hover-class="changestyle">-->
    <!--<image class="sh_slt" src="{{item.photo_x}}"></image>-->
    <!--<div class="sp_text">-->
    <!--<div class="sp_tit ovh1">{{item.name}}</div>-->
    <!--<div class="sp_jg">￥{{item.price_yh}}</div>-->
    <!--</div>-->
    <!--</navigator>-->
    <!--</div>-->
</div>

</body>

<script type="text/javascript">
    function doSearch(e) {
        var x = $(e).html();
        $("#search").val(x);
        $api.css($api.dom('.cont'), 'display: none;');
        $api.css($api.dom('.search_no'), 'display: block;');
    }

    function Search() {
        $y = $("#search").val();
        $("#ss").append('<div onclick="doSearch(this);">' + $y + '</div>');
    }

    $('#search').bind('input propertychange', function () {
        if ($('#search').val().length == 0) {
            $('.cont').css('display', 'block');
            $('.search_no').css('display', 'none');
        }
    });

</script>
</html>